<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>holle!</title>
    <style>
        body {
            background-color: cornflowerblue;
        }

        header {
            margin-left: 50px;
        }

        .a1 {
            background: no-repeat center/100% url("1.jpg");
            text-align: center;
            padding: 30px;
            margin-left: 20px;

        }

        nav ul li {
            display: inline;
        }

        li ul,
        .a2 {
            background-color: black;
        }

        li:hover ul {
            display: block;

        }

        li ul {
            display: none;
            position: absolute;
        }

        .a2 {

            float: right;
            /*   将一级导航的列表进行浮动 改为横向排列 */
            width: auto;

            line-height: 30px;
        }

        ul li {
            padding: 20px;
            color: white;
        }

        ul li:hover {
            color: red;
        }

        .a3 {
            float: right;
            position: absolute;
            right: 0;
            border: 20px;
        }

        /* header is here  */

        .b1 {
            background-color: yellow;
            position: fixed;
            left: 0;
            top: 0;
            margin: 2px;

        }

        .b2 {

            /* position: relative; */
            /* left:2px ; */
            margin-left: 300px;
            /* margin-right:200px; */
            margin-top: 20px;
            max-width: 25%;
        }

        .b2 div {
            border: solid 2px;

            border-radius: 25px;
            box-shadow: 20px;
            background-color: aqua;
            margin-left: auto;
            margin-right: auto;
        }

        img {
            width: 80%;
            border-radius: 25px;
            text-align: center;
            margin: 10px;

        }

        h3 {
            text-align: center;
            color: azure;

        }
        td div{
            width: 100%;
        }

        /* footer is here */
        .c1 {
            background-color: blueviolet;
            text-align: center;
            font-size: medium;
        }

        a {
            list-style: none;
            text-decoration: none;
        }

        a:active {
            color: green;
        }
    </style>
</head>

<body>

    <header>
        <div class="a1">
            <a href="https://www.baidu.com/">百度</a>
            <a href="https://www.zhihu.com">知乎</a>
            <a href="https://www.bilibili.com/">bilibili</a>
        </div>
        <nav class="a2">

            <ul>
                <li>a</li>
                <li>b</li>
                <li>c<ul class="a3">
                        <li>c<br></li>
                        <li>d<br></li>
                        <li>f<br></li>
                    </ul>
                </li>
            </ul>

        </nav>
    </header>
    <main>
        <div class="b1">
            <ul>
                <li><a href="#aa">水星</a></li>
                <li><a href="#ab">金星</a></li>
                <li><a href="#ac">地球</a></li>
                <li><a href="#ad">火星</a></li>
                <li><a href="#ae">木星</a></li>
                <li><a href="#af">土星</a></li>
                <li><a href="#ag">天王星</a></li>
                <li><a href="#ah">海王星</a></li>

            </ul>
        </div>
        <div class="b2">

            <table>
                <tr>
                    <td>
                        <div id="aa">
                            <img src="5.jpg">
                            <h3>水星</h3>

                        </div>
                    </td>
                    <td>
                        <div id="ab">
                            <img src="6.jpg">
                            <h3>金星</h3>

                        </div>
                    </td>
                <tr>
                    <td>
                        <div id="ac">
                            <img src="8.jpg">
                            <h3>地球</h3>
                        </div>
                    </td>
                    <td>
                        <div id="ad">
                            <img src="hx.jpg">
                            <h3>火星</h3>
                        </div>

                    </td>
                </tr>
                <tr>
                    <td>
                    <div id="ae">
                        <img src="mx.jpg">
                        <h3>木星</h3>
                    </div>
                </td>
                <td>
                    <div id="af">
                        <img src="tx.jpg">
                        <h3>土星</h3>
                    </div>
                </td>
                </tr>

                <tr>
                    <td>
                        <div id="ag">
                            <img src="twx.jpg">
                            <h3>天王星</h3>
                        </div>

                    </td>
                
                    <td>
                    <div>
                        <img src="hwx.jpg">
                        <h3 id="ah">海王星</h3>
                    </div>
                    </td>
                </tr>
            </table>
        </div>
    </main>
    <footer>
        <div class="c1">2022-12-5<br>
            19:56</div>
    </footer>
</body>

</html>